<template>
  <div class="swiperBox">
    <!-- <swiper :options="swiperOption">
        <swiper-slide v-for="item of swiperList" :key="item.id">
          <router-link :to="{name:item.url}">
            <img :src="item.imgUrl" alt="">
          </router-link>
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper> -->
      <Slider :options="options">
        <swiper-slide v-for="item of swiperList" :key="item.id">
          <router-link :to="{name:item.url}">
            <img :src="item.imgUrl" alt="">
          </router-link>
        </swiper-slide>
      </Slider>
  </div>
</template>

<script>
import Slider from '@/components/slider'
export default {
  name: 'HomeSwiper',
  components: {
    Slider
  },
  data () {
    return {
      swiperList: [
        {
          id: 10001,
          imgUrl:
            '//img1.qunarzz.com/piao/fusion/1804/14/21f410d1016c8702.jpg_640x200_84d0effe.jpg',
          url: 'www.baidu.com'
        },
        {
          id: 10002,
          imgUrl:
            '//img1.qunarzz.com/piao/fusion/1804/b7/a0bf001f81a6ed02.jpg_640x200_8ee5e859.jpg',
          url: 'https:www.ba256.com'
        }
      ],
      options: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: 5000,
        loop: true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.swiperBox /deep/ .swiper-pagination-bullet-active {
  background: #ffffff !important;
}
.swiperBox {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 31.25%;
  img {
    width: 100%;
  }
}
</style>
